<template>
  <div>
    <!-- 采用Container布局容器 选择最后一个，样式先全复制（.el-aside需要补齐颜色，.el-main需要删除行高，另外补上高和最大高度vh，.el-header需要为头像补充样式） -->
    <!-- 废弃所有子组件的引用 -->
    <el-container>
      
      <!--el-aside部分，直接引用EL_menu菜单入口 -->
      <el-aside width="200px">
        <div class="logo"></div>
        <EL_menu></EL_menu>
      </el-aside>

      <el-container>
        <!--el-header部分 分头像和下拉框两部分 -->
        <el-header>
          <EL_header></EL_header>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>

        <el-footer>
          <!-- <EL_footer></EL_footer> -->
          © 2022-2022 就爱信息科技有限公司 京公网安备 11000002002068号
          京ICP备12025439号-7
        </el-footer>
        
      </el-container>
      
    </el-container>
  </div>
</template>
<script>
    // header
    import EL_header from "../container/EL_header.vue";
    // footer
    // import EL_footer from "../container/EL_footer.vue";
    // aside
    // import EL_aside from "../container/EL_aside.vue";

    import EL_menu from "../left_menu/EL_menu.vue";

    export default {
        components: {
            EL_header,
            // EL_footer,
            // EL_aside,
            EL_menu
        },
    };
</script>

<style>
    .el-header,
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
        /* 补齐颜色 */
        background-color: rgb(84, 92, 100);
    }
    
    .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        /* line-height: 160px; */
        /* 下面是补充把居中和行高去掉还有App.vue里的 
         设置main可见范围 */
        height: 650px;
        max-height: calc(100vh - 120px);
    }
    
    body>.el-container {
        margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    /* dropdown下拉框样式照抄只去颜色 */
    
    .el-dropdown-link {
        cursor: pointer;
    }
    
    .el-icon-arrow-down {
        font-size: 12px;
    }
    /* 下面全是额外的样式 */
    /* * {
        margin: 0px;
    }
     */
    
    .logo {
        height: 60px;
        width: 200px;
        background-color: cadetblue;
        background: url('@/assets/accelerator.gif');
    }
    /* 为了头像歌下拉框新增样式，使其偏右及居中 */
    
    .el-header {
        display: flex;
        justify-content: right;
        align-items: center;
    }
    
    .el-avatar {
        margin-right: 5px;
    }
</style>